<template>
    <div class="both" style="padding: 0px 40px;margin-top: 30px;">
        <div class="main">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <div class="box-bg">
                        <div class="elicon">
                            <el-icon :size="40" color="#40C9C6">
                                <Grid />
                            </el-icon>
                            <div hidden-xs-only hidden-sm-only hidden-sm-and-down>
                                <div>商品数量</div>
                                <count-to :startVal="0" :endVal="quantity" :duration="3000"></count-to>
                            </div>
                        </div>
                        <div class="elicon">
                            <el-icon :size="40" color="#36A3F7">
                                <ChatDotSquare />
                            </el-icon>
                            <div>
                                <div>未发货单</div>
                                <count-to :startVal="0" :endVal="waitStockCounts" :duration="3000"></count-to>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 柱形图 -->
                <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                    <div id="columnChart" ref="column"></div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-row>
                <!-- 折线图 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <div id="lineChart" ref="line"></div>
                </el-col>
                <!-- 饼状图 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                    <div id="pieChart" ref="pie"></div>
                </el-col>
                <!-- 饼状图2 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                    <div id="pieCharts" ref="pies"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Grid, ChatDotSquare } from '@element-plus/icons-vue';
import * as echarts from 'echarts'
import { CountTo } from 'vue3-count-to'
import { ref, onBeforeUnmount } from 'vue';
import { post } from '@/utlis/http';//引入封装好的axios
type EChartsOption = echarts.EChartsOption
const quantity = ref()        //商品数量
const waitStockCounts = ref()  //未发货单
let column: echarts.ECharts | undefined = undefined
let line: echarts.ECharts | undefined = undefined
let pie: echarts.ECharts | undefined = undefined
let pies: echarts.ECharts | undefined = undefined
const king = () => {
    let data = {
        _gp: 'admin.dashboard',
        _mt: 'integral'
    }
    post(data).then((res) => {
        console.log(res);
        let { daysOrder, channel, area, daysSum, goodsCount, waitStockCount } = res.data
        if (200===res.errno) {
            quantity.value = goodsCount
        waitStockCounts.value = waitStockCount
        // 柱形图
        let columnChart = document.getElementById('columnChart')!;
        column = echarts.init(columnChart);
       
        
        

        // 柱形图
        let columnOption: EChartsOption = {
            title: {//左边标题
                text: '七日订单',
                subtext: '订单数',
                left: 'left'
            },
            legend: {//右边标题
                left: 'right'
            },
            xAxis: {
                type: 'category',
                data: daysOrder[0]    //日期
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单数',//右边文字
                    type: 'bar',
                    barWidth: '30%',       //柱子宽度
                    color: ['#3EA6F7'],   //柱子颜色
                    emphasis: { focus: 'series' },//聚焦当前高亮的数据所在的系列的所有图形。
                    data: daysOrder[1]    //数据
                },
            ]
        };
         // 柱形图
         columnOption && column.setOption(columnOption);
          // 折线图
        let lineChart = document.getElementById('lineChart')!;
        line = echarts.init(lineChart);
        // 折线图
        let lineOption: EChartsOption = {
            title: {
                text: '7日成交金额',
                subtext: '订单数',
                left: 'left'
            },
            legend: {
                left: 'right'
            },
            xAxis: {
                type: 'category',
                data: daysSum[0]    //日期
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单数',
                    type: 'line',
                    emphasis: {
                        focus: 'series'
                    },
                    data: daysSum[1]    //数据
                },
            ]
        };
        // 折线图
        lineOption && line.setOption(lineOption);
        // 饼状图
        let pieChart = document.getElementById('pieChart')!;
        pie = echarts.init(pieChart);
        //饼状图
        let pieOption = {
            title: {
                text: '订单地区分布',
                left: 'left'
            },
            legend: {
                data: ['地区分布'],
                left: 'right'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: area,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //饼状图
        pieOption && pie.setOption(pieOption);
        // 饼状图2
        let pieCharts = document.getElementById('pieCharts')!;
        pies = echarts.init(pieCharts);
        //饼状图2
        let pieOptions = {
            title: {
                text: '订单渠道分布',
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: channel,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
       //饼状图2
       pieOptions && pies.setOption(pieOptions);
        window.onresize = function () {
            // echarts图表自适应resize方法
            if (column && line && pie && pies) {//去除滚动条
                column.resize();
                line.resize();
                pie.resize();
                pies.resize();
            }

        };
        }
    }).catch((err) => {

    });
}
king()
// 上线后处理
// onBeforeUnmount(() => {
//     if (column) {
//         column.dispose()
//         column = undefined
//     }
//     if (line) {
//         line.dispose()
//         line = undefined
//     }
//     if (pie) {
//         pie.dispose()
//         pie = undefined
//     }
//     if (pies) {
//         pies.dispose()
//         pies = undefined
//     }
// })
</script>

<style lang="less" scoped>
.box-bg {
    height: 340px;

    .elicon {
        height: 80px;
        padding: 0px 20px;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 0px 20px 0px #e3e2e2;
    }
}

// 柱形图
#columnChart {
    width: 80%;
    margin: auto;
    height: 340px;
}

// 折线图
#lineChart {
    width: 100%;
    height: 300px;
}

// 饼图
#pieChart {
    width: 100%;
    height: 300px;
}

// 饼图2
#pieCharts {
    width: 100%;
    height: 300px;
}
</style>